header {
    menu {
        list-style: none;
        text-transform: uppercase;
        font-size:18px;
        position:absolute;
        left:200px;
        width:$container-width - 200px;

        li {
            float:left;

            a {
                display:block;
                line-height: $header-height;
                padding:0 20px;
                text-decoration:none;
                color:rgba(white, 0.5);

                &:hover {
                    color:white;
                    background:rgba(#fff, 0.2);
                    border-bottom: 5px solid $blue-light;
                }
            }

            &.contact {
                float:right
            }

            &.selected {
                a {
                    color:white;
                    background:rgba($blue-light, 0.6);
                    border-bottom: 5px solid $blue-light;
                }
            }

            &.language {
                position:absolute;
                width:100px;
                height:20px;
                right:-107px;
                top:20px;
                font-size:11px;
                text-transform: uppercase;

                a {
                    color:white;
                    text-decoration: none;
                    display:block;
                    padding:2px 4px 2px 26px;
                    background: {
                        image: image-url('flags.png');
                        position:2px 0;
                        repeat: no-repeat
                    }
                    opacity:0.3;
                    text-align:left;
                    line-height: normal;

                    &:hover {
                        opacity:1;
                        background-color:transparent;
                        border:none
                    }
                }

                &.selected a {
                    opacity:1;
                    background-color:transparent;
                    border:none
                }

                &.en {
                    top:40px;

                    a {background-position: 2px -20px}
                }

            }
        }
    }
}

@media all and(max-width:900px) {
    html {
        body {
            header {
                menu {
                    position:fixed;
                    left:100%;
                    top:0;
                    background:$blue;
                    z-index: 999;
                    width:100%;
                    text-align:center;
                    @include box-shadow(0, 0, 10px, $grey);

                    li {
                        display:block;
                        float:none !important;

                        &.selected a, a:hover {
                            border:none
                        }

                        &.toggler {
                            cursor:pointer;
                            display:block;
                            content: "a";
                            width:48px;
                            height:48px;
                            background: {
                                image: image-url('menu.png');
                                repeat: no-repeat;
                                position: center center;
                            }
                            position:absolute;
                            z-index:1;
                            left:-60px;
                            top:8px;
                            text-indent: -100em;
                            overflow:hidden;
                        }

                        &:last-child {
                            position:static;
                            width:auto;
                        }

                        &.language {
                            position:relative;
                            width:100%;
                            height:auto;
                            right:auto;
                            left:auto;
                            top:auto;
                            background-color:$blue-light;

                            a {
                                color:$blue;
                                line-height: $header-height;
                                padding:0;
                                font-size:18px;
                                background:none;
                                text-align: center
                            }

                            &:before {
                                content: " ";
                                width: 24px;
                                height: 24px;
                                background: image-url('flags.png') no-repeat 0 0;
                                position:absolute;
                                margin:30px 0 0 50px;
                            }

                            &.en {
                                top:auto;

                                &:before {
                                    background-position:0 -20px
                                }
                            }
                        }
                    }

                    &.opened {
                        li.toggler {
                            left:auto;
                            right:8px
                        }
                    }
                }
            }
        }
    }
}